import $ from 'jquery'
import * as joint from 'jointjs'
import Element from './element'
import * as cc from '../util/constants'

/**
 * 关联节点
 */
const JointJoin = joint.shapes.basic.Join = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable">' +
        `<rect class="background" width="${cc.ELEMENT_WIDTH}" height="${cc.ELEMENT_HEIGHT}" fill="none"/>` +
        // 内关联
        '<path class="fill shadow inner-shadow" d="M36,20c0-3.6,1.8-6.9,4.5-8.9C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1 C37.8,26.9,36,23.6,36,20z"/>' +
        '<path class="fill shadow inner-shadow" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1c2.7,2,4.5,5.2,4.5,8.9s-1.8,6.9-4.5,8.9c1.8,1.3,4.1,2.1,6.5,2.1 c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        '<ellipse class="fill shadow inner-shadow" cx="40.5" cy="20" rx="4.5" ry="8.9"/>' +
        '<ellipse class="fill inner-stroke" cx="40.5" cy="20" rx="4.5" ry="8.9"/>' +
        // '<path class="fill shadow inner-shadow" d="M42.5,15.4c0.9,1.3,1.5,2.9,1.5,4.6s-0.6,3.3-1.5,4.6c0.6,0.8,1.3,1.5,2.2,2.1c1.4-1.9,2.3-4.2,2.3-6.7 s-0.9-4.9-2.3-6.7C43.8,13.8,43.1,14.5,42.5,15.4z"/>' +
        // '<path class="fill shadow inner-shadow" d="M40.3,13.3c0.9,0.6,1.6,1.3,2.2,2.1c0.6-0.8,1.3-1.5,2.2-2.1c-0.6-0.8-1.4-1.5-2.2-2.1 C41.7,11.7,40.9,12.5,40.3,13.3z"/>' +
        // '<path class="fill shadow inner-shadow" d="M44.7,26.7c-0.9-0.6-1.6-1.3-2.2-2.1c-0.6,0.8-1.3,1.5-2.2,2.1c0.6,0.8,1.4,1.5,2.2,2.1 C43.3,28.3,44.1,27.5,44.7,26.7z"/>' +
        // '<path class="fill shadow2 inner-shadow" d="M43,20c0-1.5-0.3-2.9-0.8-4.1c0.1-0.2,0.2-0.4,0.3-0.5c-0.4-0.5-0.9-1-1.4-1.5c-0.1-0.2-0.3-0.4-0.4-0.6 c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.2,0.2-0.3,0.4-0.4,0.6c-0.5,0.4-1,0.9-1.4,1.5c0.1,0.2,0.2,0.3,0.3,0.5 C38.3,17.1,38,18.5,38,20s0.3,2.9,0.8,4.1c-0.1,0.2-0.2,0.4-0.3,0.5c0.4,0.5,0.9,1,1.4,1.5c0.1,0.2,0.3,0.4,0.4,0.6 c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0.1,0.2,0.1c0.2-0.2,0.3-0.4,0.4-0.6c0.5-0.4,1-0.9,1.4-1.5c-0.1-0.2-0.2-0.3-0.3-0.5 C42.7,22.9,43,21.5,43,20z"/>' +
        // '<path class="fill shadow inner-shadow" d="M38.5,15.4c-0.6-0.8-1.3-1.5-2.2-2.1C34.9,15.1,34,17.5,34,20s0.9,4.9,2.3,6.7c0.9-0.6,1.6-1.3,2.2-2.1 C37.6,23.3,37,21.7,37,20S37.6,16.7,38.5,15.4z"/>' +
        // '<path class="fill shadow inner-shadow" d="M36.3,13.3c0.9,0.6,1.6,1.3,2.2,2.1c0.6-0.8,1.3-1.5,2.2-2.1c-0.6-0.8-1.4-1.5-2.2-2.1 C37.7,11.7,36.9,12.5,36.3,13.3z"/>' +
        // '<path class="fill shadow inner-shadow" d="M40.7,26.7c-0.9-0.6-1.6-1.3-2.2-2.1c-0.6,0.8-1.3,1.5-2.2,2.1c0.6,0.8,1.4,1.5,2.2,2.1 C39.3,28.3,40.1,27.5,40.7,26.7z"/>' +
        // '<path class="fill shadow inner-shadow" d="M38.3,26.7C37.1,27.5,35.6,28,34,28c-4.4,0-8-3.6-8-8s3.6-8,8-8c1.6,0,3.1,0.5,4.3,1.3c0.6-0.8,1.4-1.5,2.2-2.1 C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1C39.7,28.3,38.9,27.5,38.3,26.7z"/>' +
        // '<path class="fill shadow inner-shadow" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1c0.8,0.6,1.6,1.3,2.2,2.1c1.2-0.8,2.7-1.3,4.3-1.3c4.4,0,8,3.6,8,8s-3.6,8-8,8 c-1.6,0-3.1-0.5-4.3-1.3c-0.6,0.8-1.4,1.5-2.2,2.1c1.8,1.3,4.1,2.1,6.5,2.1c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        // '<path class="fill inner-stroke" d="M40.5,15.4c0.9,1.3,1.5,2.9,1.5,4.6s-0.6,3.3-1.5,4.6c0.6,0.8,1.3,1.5,2.2,2.1c1.4-1.9,2.3-4.2,2.3-6.7s-0.9-4.9-2.3-6.7 C41.8,13.8,41.1,14.5,40.5,15.4z"/>' +
        // '<path class="fill inner-stroke" d="M40.5,15.4c-0.6-0.8-1.3-1.5-2.2-2.1C36.9,15.1,36,17.5,36,20s0.9,4.9,2.3,6.7c0.9-0.6,1.6-1.3,2.2-2.1 C39.6,23.3,39,21.7,39,20S39.6,16.7,40.5,15.4z"/>' +
        // '<path class="fill inner-stroke" d="M38.3,13.3c0.9,0.6,1.6,1.3,2.2,2.1c0.6-0.8,1.3-1.5,2.2-2.1c-0.6-0.8-1.4-1.5-2.2-2.1C39.7,11.7,38.9,12.5,38.3,13.3z"/>' +
        // '<path class="fill inner-stroke" d="M42.7,26.7c-0.9-0.6-1.6-1.3-2.2-2.1c-0.6,0.8-1.3,1.5-2.2,2.1c0.6,0.8,1.4,1.5,2.2,2.1C41.3,28.3,42.1,27.5,42.7,26.7z"/>' +

        // 左关联
        '<path class="fill shadow left-shadow" d="M34,31c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7c2.4,0,4.6-0.8,6.4-2c-0.7-0.3-1.3-0.7-1.9-1.1 C38.7,30.2,36.4,31,34,31z"/>' +
        '<path class="fill shadow left-shadow" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1c2.7,2,4.5,5.2,4.5,8.9s-1.8,6.9-4.5,8.9c1.8,1.3,4.1,2.1,6.5,2.1 c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        '<circle class="fill left-stroke" cx="34" cy="20" r="11"/>' +
        // '<circle class="fill shadow left-shadow" cx="34" cy="20" r="8"/>' +
        // '<path class="fill shadow2 left-shadow" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1c0.8,0.6,1.6,1.3,2.2,2.1c1.2-0.8,2.7-1.3,4.3-1.3c4.4,0,8,3.6,8,8s-3.6,8-8,8 c-1.6,0-3.1-0.5-4.3-1.3c-0.6,0.8-1.4,1.5-2.2,2.1c1.8,1.3,4.1,2.1,6.5,2.1c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        // '<path class="fill shadow2 left-shadow" d="M39.4,24.5c0.3-0.4,0.4-1,0.2-1.5c-0.4-0.9-0.6-1.9-0.6-3s0.2-2.1,0.6-3c0.2-0.5,0.1-1.1-0.2-1.5c0,0,0,0,0,0 c-0.7-0.9-2.1-0.7-2.5,0.4C36.3,17.1,36,18.5,36,20s0.3,2.9,0.8,4.1C37.2,25.2,38.6,25.4,39.4,24.5C39.3,24.5,39.4,24.5,39.4,24.5z"/>' +
        // '<path class="fill shadow2 left-shadow" d="M39.9,10.7C39.9,10.7,39.9,10.7,39.9,10.7C39.9,10.7,39.9,10.7,39.9,10.7c0,0,0.1,0.1,0.1,0.1c3,2,5,5.3,5,9.2 c0,6.1-4.9,11-11,11c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7c6.1,0,11-4.9,11-11C47,16.3,44,12.3,39.9,10.7z"/>' +
        // '<path class="fill left-stroke" d="M34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11s11-4.9,11-11S40.1,9,34,9z M34,28c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8 S38.4,28,34,28z"/>' +
        // 右关联
        '<path class="fill shadow right-shadow" d="M52.9,10.7c3.1,2,5.1,5.4,5.1,9.3c0,6.1-4.9,11-11,11c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7 c6.1,0,11-4.9,11-11C60,16.3,57,12.3,52.9,10.7z"/>' +
        '<circle class="fill right-stroke" cx="47" cy="20" r="11"/>' +
        '<path class="fill shadow right-shadow" d="M36,20c0-3.6,1.8-6.9,4.5-8.9C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1 C37.8,26.9,36,23.6,36,20z"/>' +
        // '<path class="fill shadow right-shadow" d="M38.3,26.7C37.1,27.5,35.6,28,34,28c-4.4,0-8-3.6-8-8s3.6-8,8-8c1.6,0,3.1,0.5,4.3,1.3c0.6-0.8,1.4-1.5,2.2-2.1 C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1C39.7,28.3,38.9,27.5,38.3,26.7z"/>' +
        // '<path class="fill shadow right-shadow" d="M52.9,10.7c3.1,2,5.1,5.4,5.1,9.3c0,6.1-4.9,11-11,11c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7 c6.1,0,11-4.9,11-11C60,16.3,57,12.3,52.9,10.7z"/>' +
        // '<circle class="fill shadow2 right-shadow" cx="47" cy="20" r="8"/>' +
        // '<path class="fill shadow right-shadow" d="M41.7,15.5C41.7,15.5,41.6,15.5,41.7,15.5c-0.4,0.4-0.5,1-0.3,1.5c0.4,0.9,0.6,1.9,0.6,3s-0.2,2.1-0.6,3 c-0.2,0.5-0.1,1.1,0.2,1.5c0,0,0,0,0,0c0.7,0.9,2.1,0.7,2.5-0.4c0.5-1.3,0.8-2.7,0.8-4.1s-0.3-2.9-0.8-4.1 C43.8,14.8,42.4,14.6,41.7,15.5z"/>' +
        // '<path class="fill right-stroke" d="M47,9c-6.1,0-11,4.9-11,11s4.9,11,11,11s11-4.9,11-11S53.1,9,47,9z M47,28c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8 S51.4,28,47,28z"/>' +
        // 外关联
        '<path class="fill shadow cross-shadow" d="M34,31c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7c2.4,0,4.6-0.8,6.4-2c-0.7-0.3-1.3-0.7-1.9-1.1 C38.7,30.2,36.4,31,34,31z"/>' +
        '<path class="fill shadow cross-shadow" d="M52.9,10.7c3.1,2,5.1,5.4,5.1,9.3c0,6.1-4.9,11-11,11c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7 c6.1,0,11-4.9,11-11C60,16.3,57,12.3,52.9,10.7z"/>' +
        '<path class="fill cross-stroke" d="M35,20c0-3.8,1.8-7.2,4.6-9.4C38,9.6,36.1,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.1,0,4-0.6,5.6-1.6 C36.8,27.2,35,23.8,35,20z"/>' +
        '<path class="fill cross-stroke" d="M47,9c-2.1,0-4,0.6-5.6,1.6c2.8,2.2,4.6,5.6,4.6,9.4s-1.8,7.2-4.6,9.4c1.6,1,3.6,1.6,5.6,1.6 c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        '<path class="fill shadow cross-shadow" d="M41.4,29.4c2.8-2.2,4.6-5.6,4.6-9.4s-1.8-7.2-4.6-9.4c-0.3,0.2-0.6,0.4-0.9,0.6c-0.3-0.2-0.6-0.4-0.9-0.6 C36.8,12.8,35,16.2,35,20s1.8,7.2,4.6,9.4c0.3-0.2,0.6-0.4,0.9-0.6C40.8,29.1,41.1,29.3,41.4,29.4z"/>' +
        // '<path class="fill shadow cross-shadow" d="M40.6,11c-0.2-0.1-0.5-0.2-0.8-0.3c0.2,0.1,0.4,0.3,0.6,0.4C40.5,11.1,40.6,11.1,40.6,11z"/>' +
        // '<path class="fill shadow cross-shadow" d="M34,31c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7c2.4,0,4.6-0.8,6.4-2c-0.7-0.3-1.3-0.7-1.9-1.1 C38.7,30.2,36.4,31,34,31z"/>' +
        // '<path class="fill shadow cross-shadow" d="M52.9,10.7c3.1,2,5.1,5.4,5.1,9.3c0,6.1-4.9,11-11,11c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7 c6.1,0,11-4.9,11-11C60,16.3,57,12.3,52.9,10.7z"/>' +
        // '<path class="fill shadow2 cross-shadow" d="M40.5,15.3C39,13.3,36.7,12,34,12c-4.4,0-8,3.6-8,8s3.6,8,8,8c2.7,0,5-1.3,6.5-3.3C39.6,23.3,39,21.7,39,20 S39.6,16.7,40.5,15.3z"/>' +
        // '<path class="fill shadow2 cross-shadow" d="M47,12c-2.7,0-5,1.3-6.5,3.3c0.9,1.3,1.5,2.9,1.5,4.7s-0.6,3.3-1.5,4.7c1.5,2,3.8,3.3,6.5,3.3c4.4,0,8-3.6,8-8 S51.4,12,47,12z"/>' +
        // '<path class="fill cross-stroke" d="M34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11s11-4.9,11-11S40.1,9,34,9z M34,28c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8 S38.4,28,34,28z"/>' +
        // '<path class="fill cross-stroke" d="M47,9c-6.1,0-11,4.9-11,11s4.9,11,11,11s11-4.9,11-11S53.1,9,47,9z M47,28c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8 S51.4,28,47,28z"/>' +
        // 右差集（右减左）
        '<path class="fill shadow diff-right-shadow" d="M52.9,10.7c3.1,2,5.1,5.4,5.1,9.3c0,6.1-4.9,11-11,11c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7 c6.1,0,11-4.9,11-11C60,16.3,57,12.3,52.9,10.7z"/>' +
        '<circle class="fill shadow diff-right-shadow" cx="34" cy="20" r="11"/>' +
        '<path class="fill diff-right-stroke" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1c2.7,2,4.5,5.2,4.5,8.9s-1.8,6.9-4.5,8.9c1.8,1.3,4.1,2.1,6.5,2.1 c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        // '<path class="fill diff-right-stroke" d="M40.6,11c-0.2-0.1-0.5-0.2-0.8-0.3c0.2,0.1,0.4,0.3,0.6,0.4C40.5,11.1,40.6,11.1,40.6,11z"/>' +
        // '<path class="fill shadow diff-right-shadow" d="M52.9,10.7c3.1,2,5.1,5.4,5.1,9.3c0,6.1-4.9,11-11,11c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7 c6.1,0,11-4.9,11-11C60,16.3,57,12.3,52.9,10.7z"/>' +
        // '<path class="fill diff-right-stroke" d="M42.7,13.3c-0.9,0.6-1.6,1.3-2.2,2.1c0.9,1.3,1.5,2.9,1.5,4.6s-0.6,3.3-1.5,4.6c0.6,0.8,1.3,1.5,2.2,2.1 c1.4-1.9,2.3-4.2,2.3-6.7S44.1,15.1,42.7,13.3z"/>' +
        // '<path class="fill shadow diff-right-shadow" d="M38.3,26.7C37.1,27.5,35.6,28,34,28c-4.4,0-8-3.6-8-8s3.6-8,8-8c1.6,0,3.1,0.5,4.3,1.3c0.6-0.8,1.4-1.5,2.2-2.1 C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1C39.7,28.3,38.9,27.5,38.3,26.7z"/>' +
        // '<path class="fill shadow diff-right-shadow" d="M39.4,24.5c0.3-0.4,0.4-1,0.2-1.5c-0.4-0.9-0.6-1.9-0.6-3s0.2-2.1,0.6-3c0.2-0.5,0.1-1.1-0.2-1.5c0,0,0,0,0,0 c-0.7-0.9-2.1-0.7-2.5,0.4C36.3,17.1,36,18.5,36,20s0.3,2.9,0.8,4.1C37.2,25.2,38.6,25.4,39.4,24.5C39.3,24.5,39.4,24.5,39.4,24.5z" />' +
        // '<path class="fill diff-right-stroke" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1c0.8,0.6,1.6,1.3,2.2,2.1c1.2-0.8,2.7-1.3,4.3-1.3c4.4,0,8,3.6,8,8s-3.6,8-8,8 c-1.6,0-3.1-0.5-4.3-1.3c-0.6,0.8-1.4,1.5-2.2,2.1c1.8,1.3,4.1,2.1,6.5,2.1c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        // '<path class="fill diff-right-stroke" d="M40.5,24.6c-0.6,0.8-1.3,1.5-2.2,2.1c0.6,0.8,1.4,1.5,2.2,2.1c0.8-0.6,1.6-1.3,2.2-2.1C41.8,26.2,41.1,25.5,40.5,24.6z"/>' +
        // '<path class="fill diff-right-stroke" d="M40.5,11.1c-0.8,0.6-1.6,1.3-2.2,2.1c0.9,0.6,1.6,1.3,2.2,2.1c0.6-0.8,1.3-1.5,2.2-2.1C42.1,12.5,41.3,11.7,40.5,11.1z"/>' +
        // '<path class="fill shadow2 diff-right-shadow" d="M47,12c-1.6,0-3.1,0.5-4.3,1.3c1.4,1.9,2.3,4.2,2.3,6.7s-0.9,4.9-2.3,6.7c1.2,0.8,2.7,1.3,4.3,1.3 c4.4,0,8-3.6,8-8S51.4,12,47,12z"/>' +
        // 左差集（左减右）
        '<path class="fill shadow diff-left-shadow" d="M34,31c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7c2.4,0,4.6-0.8,6.4-2c-0.7-0.3-1.3-0.7-1.9-1.1 C38.7,30.2,36.4,31,34,31z"/>' +
        '<path class="fill diff-left-stroke" d="M36,20c0-3.6,1.8-6.9,4.5-8.9C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1 C37.8,26.9,36,23.6,36,20z"/>' +
        '<circle class="fill shadow diff-left-shadow" cx="47" cy="20" r="11"/>' +
        // '<path class="fill diff-left-stroke" d="M40.6,11c-0.2-0.1-0.5-0.2-0.8-0.3c0.2,0.1,0.4,0.3,0.6,0.4C40.5,11.1,40.6,11.1,40.6,11z"/>' +
        // '<path class="fill shadow diff-left-shadow" d="M34,31c-1.4,0-2.7-0.3-3.9-0.7c1.7,1.1,3.7,1.7,5.9,1.7c2.4,0,4.6-0.8,6.4-2c-0.7-0.3-1.3-0.7-1.9-1.1 C38.7,30.2,36.4,31,34,31z"/>' +
        // '<path class="fill shadow diff-left-shadow" d="M41.7,15.5C41.7,15.5,41.6,15.5,41.7,15.5c-0.4,0.4-0.5,1-0.3,1.5c0.4,0.9,0.6,1.9,0.6,3s-0.2,2.1-0.6,3 c-0.2,0.5-0.1,1.1,0.2,1.5c0,0,0,0,0,0c0.7,0.9,2.1,0.7,2.5-0.4c0.5-1.3,0.8-2.7,0.8-4.1s-0.3-2.9-0.8-4.1 C43.8,14.8,42.4,14.6,41.7,15.5z"/>' +
        // '<path class="fill diff-left-stroke" d="M38.3,26.7C37.1,27.5,35.6,28,34,28c-4.4,0-8-3.6-8-8s3.6-8,8-8c1.6,0,3.1,0.5,4.3,1.3c0.6-0.8,1.4-1.5,2.2-2.1 C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1C39.7,28.3,38.9,27.5,38.3,26.7z"/>' +
        // '<path class="fill shadow diff-left-shadow" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1c0.8,0.6,1.6,1.3,2.2,2.1c1.2-0.8,2.7-1.3,4.3-1.3c4.4,0,8,3.6,8,8s-3.6,8-8,8 c-1.6,0-3.1-0.5-4.3-1.3c-0.6,0.8-1.4,1.5-2.2,2.1c1.8,1.3,4.1,2.1,6.5,2.1c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        // '<path class="fill diff-left-stroke" d="M40.5,15.4c-0.6-0.8-1.3-1.5-2.2-2.1C36.9,15.1,36,17.5,36,20s0.9,4.9,2.3,6.7c0.9-0.6,1.6-1.3,2.2-2.1 C39.6,23.3,39,21.7,39,20S39.6,16.7,40.5,15.4z"/>' +
        // '<path class="fill diff-left-stroke" d="M42.7,13.3c-0.6-0.8-1.4-1.5-2.2-2.1c-0.8,0.6-1.6,1.3-2.2,2.1c0.9,0.6,1.6,1.3,2.2,2.1C41.1,14.5,41.8,13.8,42.7,13.3z"/>' +
        // '<path class="fill diff-left-stroke" d="M40.5,24.6c-0.6,0.8-1.3,1.5-2.2,2.1c0.6,0.8,1.4,1.5,2.2,2.1c0.8-0.6,1.6-1.3,2.2-2.1C41.8,26.2,41.1,25.5,40.5,24.6z"/>' +
        // '<path class="fill shadow2 diff-left-shadow" d="M38.3,13.3C37.1,12.5,35.6,12,34,12c-4.4,0-8,3.6-8,8s3.6,8,8,8c1.6,0,3.1-0.5,4.3-1.3C36.9,24.9,36,22.5,36,20 S36.9,15.1,38.3,13.3z"/>' +
        // 全关联
        '<path class="fill shadow full-shadow" d="M23,20c0-5.9,4.7-10.7,10.5-11c-0.2,0-0.3,0-0.5,0c-6.1,0-11,4.9-11,11s4.9,11,11,11c0.2,0,0.3,0,0.5,0 C27.7,30.7,23,25.9,23,20z"/>' +
        '<path class="fill shadow full-shadow" d="M48,9c-0.2,0-0.4,0-0.5,0C53.3,9.3,58,14.1,58,20s-4.7,10.7-10.5,11c0.2,0,0.4,0,0.5,0c6.1,0,11-4.9,11-11 S54.1,9,48,9z"/>' +
        '<path class="fill full-stroke" d="M39.6,10.6C38,9.6,36.1,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.1,0,4-0.6,5.6-1.6C36.8,27.2,35,23.8,35,20 S36.8,12.8,39.6,10.6z"/>' +
        '<path class="fill full-stroke" d="M47,9c-2.1,0-4,0.6-5.6,1.6c2.8,2.2,4.6,5.6,4.6,9.4s-1.8,7.2-4.6,9.4c1.6,1,3.6,1.6,5.6,1.6 c6.1,0,11-4.9,11-11S53.1,9,47,9z"/>' +
        '<ellipse class="fill full-stroke" cx="40.5" cy="20" rx="4.5" ry="8.9"/>' +
        // '<path class="fill shadow3 full-shadow" d="M47,12c-2.7,0-5,1.3-6.5,3.3C39,13.3,36.7,12,34,12c-4.4,0-8,3.6-8,8s3.6,8,8,8c2.7,0,5-1.3,6.5-3.3 c1.5,2,3.8,3.3,6.5,3.3c4.4,0,8-3.6,8-8S51.4,12,47,12z"/>' +
        // '<path class="fill shadow full-shadow" d="M23,20c0-5.9,4.7-10.7,10.5-11c-0.2,0-0.3,0-0.5,0c-6.1,0-11,4.9-11,11s4.9,11,11,11c0.2,0,0.3,0,0.5,0 C27.7,30.7,23,25.9,23,20z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.9,18.7c0-0.1,0-0.2-0.1-0.4C44.9,18.5,44.9,18.6,44.9,18.7z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.7,17.4c0-0.1-0.1-0.2-0.1-0.4C44.6,17.2,44.7,17.3,44.7,17.4z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.3,16.2c0-0.1-0.1-0.2-0.1-0.3C44.2,16,44.3,16.1,44.3,16.2z"/>' +
        // '<path class="fill shadow full-shadow" d="M43.8,15c0-0.1-0.1-0.2-0.1-0.3C43.7,14.9,43.8,14.9,43.8,15z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.9,21.7c0-0.1,0-0.2,0.1-0.4C44.9,21.4,44.9,21.5,44.9,21.7z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.6,22.9c0-0.1,0.1-0.2,0.1-0.4C44.7,22.7,44.6,22.8,44.6,22.9z"/>' +
        // '<path class="fill shadow full-shadow" d="M43.7,25.2c0-0.1,0.1-0.2,0.1-0.3C43.8,25.1,43.7,25.1,43.7,25.2z"/>' +
        // '<path class="fill shadow full-shadow" d="M43,26.3c0-0.1,0.1-0.1,0.1-0.2C43.1,26.1,43.1,26.2,43,26.3z"/>' +
        // '<path class="fill shadow full-shadow" d="M43.2,13.9c0-0.1-0.1-0.1-0.1-0.2C43.1,13.8,43.1,13.9,43.2,13.9z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.2,24.1c0-0.1,0.1-0.2,0.1-0.3C44.3,23.9,44.2,24,44.2,24.1z"/>' +
        // '<path class="fill shadow full-shadow" d="M48,9c-0.2,0-0.4,0-0.5,0C53.3,9.3,58,14.1,58,20s-4.7,10.7-10.5,11c0.2,0,0.4,0,0.5,0c6.1,0,11-4.9,11-11 S54.1,9,48,9z"/>' +
        // '<path class="fill shadow full-shadow" d="M43.8,15c0.1,0.3,0.3,0.6,0.4,0.8C44.1,15.6,43.9,15.3,43.8,15z"/>' +
        // '<path class="fill shadow full-shadow" d="M43.2,13.9c0.2,0.3,0.3,0.6,0.5,0.8C43.5,14.5,43.3,14.2,43.2,13.9z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.2,24.1c-0.1,0.3-0.2,0.6-0.4,0.8C43.9,24.7,44.1,24.4,44.2,24.1z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.6,22.9c-0.1,0.3-0.2,0.6-0.3,0.9C44.4,23.5,44.5,23.2,44.6,22.9z"/>' +
        // '<path class="fill shadow full-shadow" d="M43.7,25.2c-0.2,0.3-0.3,0.6-0.5,0.8C43.3,25.8,43.5,25.5,43.7,25.2z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.9,21.7c0,0.3-0.1,0.6-0.2,0.9C44.8,22.3,44.8,22,44.9,21.7z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.3,16.2c0.1,0.3,0.2,0.6,0.3,0.9C44.5,16.8,44.4,16.5,44.3,16.2z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.7,17.4c0.1,0.3,0.1,0.6,0.2,0.9C44.8,18,44.8,17.7,44.7,17.4z"/>' +
        // '<path class="fill shadow full-shadow" d="M44.9,18.7C45,19.1,45,19.6,45,20C45,19.6,45,19.1,44.9,18.7z"/>' +
        // '<path class="fill shadow full-shadow" d="M45,20c0,0.4,0,0.9-0.1,1.3C45,20.9,45,20.4,45,20z"/>' +
        // '<path class="fill shadow full-shadow" d="M40.5,15.4c0.9,1.3,1.5,2.9,1.5,4.6s-0.6,3.3-1.5,4.6c0.6,0.8,1.3,1.5,2.2,2.1c1.4-1.9,2.3-4.2,2.3-6.7 s-0.9-4.9-2.3-6.7C41.8,13.8,41.1,14.5,40.5,15.4z"/>' +
        // '<path class="fill shadow full-shadow" d="M40.5,15.4c-0.6-0.8-1.3-1.5-2.2-2.1C36.9,15.1,36,17.5,36,20s0.9,4.9,2.3,6.7c0.9-0.6,1.6-1.3,2.2-2.1 C39.6,23.3,39,21.7,39,20S39.6,16.7,40.5,15.4z"/>' +
        // '<path class="fill full-stroke" d="M47,9c-2.4,0-4.7,0.8-6.5,2.1C38.7,9.8,36.4,9,34,9c-6.1,0-11,4.9-11,11s4.9,11,11,11c2.4,0,4.7-0.8,6.5-2.1 c1.8,1.3,4.1,2.1,6.5,2.1c6.1,0,11-4.9,11-11S53.1,9,47,9z M47,28c-1.6,0-3.1-0.5-4.3-1.3c-0.9-0.6-1.6-1.3-2.2-2.1 c-0.6,0.8-1.3,1.5-2.2,2.1C37.1,27.5,35.6,28,34,28c-4.4,0-8-3.6-8-8s3.6-8,8-8c1.6,0,3.1,0.5,4.3,1.3c0.9,0.6,1.6,1.3,2.2,2.1 c0.6-0.8,1.3-1.5,2.2-2.1c1.2-0.8,2.7-1.3,4.3-1.3c4.4,0,8,3.6,8,8S51.4,28,47,28z"/>' +
        '</g>',
    defaults: joint.util.deepSupplement({
        type: 'basic.Join',
        attrs: {
            size: {
                width: cc.ELEMENT_WIDTH,
                height: cc.ELEMENT_HEIGHT,
            },
            '.fill': {
                fill: 'none'
            },
            '.shadow': {
                opacity: 0.3
            },
            '.shadow2': {
                opacity: 0.6
            },
            '.shadow3': {
                opacity: 0.5
            },
        },
    }, joint.shapes.basic.Generic.prototype.defaults)
})

const types = ['INNER', 'LEFT', 'RIGHT', 'FULL', 'diff-left', 'diff-right', 'CROSS']

class Join extends Element {
    constructor(...args) {
        super(...args)
        this._jointInstance = new JointJoin(this.jointAttrs)
    }

    mixinAttr() {
        if (types.indexOf(this.model.taskArgs.joinType) == -1) {
            this.model.taskArgs.joinType = 'INNER'
        }
        let mixin = {
            attrs: {}
        }
        $.extend(this.jointAttrs, mixin)
    }

    /**
     * 根据关联类型填充图形和颜色
     * @param {String} type
     * @param {String} colorIndex
     */
    createAttrByTypeAndColor(type, colorIndex) {
        let color = this.getColorFromIndex(colorIndex)
        let attr = {}
        for (let i in types) {
            attr[`.${types[i].toLowerCase()}-stroke`] = {
                fill: 'none'
            }
            attr[`.${types[i].toLowerCase()}-shadow`] = {
                fill: 'none'
            }
        }
        attr[`.${type.toLowerCase()}-stroke`] = {
            fill: color
        }
        attr[`.${type.toLowerCase()}-shadow`] = {
            fill: color
        }
        return attr
    }

    setColor(colorIndex) {
        super.setColor(colorIndex)
        let color = this.getColorFromIndex(colorIndex)
        this.jointInstance.attr(this.createAttrByTypeAndColor(this.model.taskArgs.joinType, this.model.color))
    }

    hasEnoughIncomingNodes() {
        return this.parent.precedingElements(this).length >= 2
    }

    setTaskArgs(taskArgs) {
        if (taskArgs.joinType) {
            this.model.taskArgs.joinType = taskArgs.joinType.toUpperCase()
            this.jointInstance.attr(this.createAttrByTypeAndColor(taskArgs.joinType, this.model.color))
        }
    }
}

export default Join
